<template>
	<div class="HistoryWallet">
		<v-header></v-header>
		<div class="tabs-bar">
			<div class="tabs-bar-nav">
				<div class="tabs-tab" v-for="(item,index) in tabsParam" :class="[nowIndex == index ? 'tabs-active' : '']" @click="toggleTabs(index)">
					{{item.name}}
				</div>
			</div>
		</div>
		<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore1">
			<div class="tabs-content">
				<div class="divTab" v-show="nowIndex===0">
					<ul class="table-box">
						<li v-if="isShow">
							<div class="no-data">
								暂无数据！
							</div>
						</li>
						<li v-if="items!=''" v-for="item in items" v-on:click = "go('/kbc/h5/HistoryDetail',item,$store.state.type)">
							<div class="table-box-item" v-if='$store.state.type==1 || $store.state.type==2'>
								<div class="left">
									<h3 v-if="item.isIncome==0">收入-{{item.payerName }}<font color="#007AFF" v-if="item.payerRealname !=''">（{{item.payerRealname }}）</font></h3>
									<h3 v-else-if="item.isIncome==1">支出-{{item.receiverName }}<font color="#007AFF" v-if="item.receiverRealname !=''">（{{item.receiverRealname }}）</font></h3>
									<p>[{{item.payType}}]</p>
									<p>{{item.payTime}}</p>
								</div>
								<div class="right">
									<h2 v-if="item.isIncome==0"><font color="#FF4949">+{{item.payAmount}}</font></h2>
									<h2 v-else-if="item.isIncome==1"><font color="#333333">-{{item.payAmount}}</font></h2>
									<p v-if="item.payStatus==0">
										<font color="#00CC66">已支付</font>
									</p>
									<p v-else-if="item.payStatus==1">
										<font color="#FF4949">未支付</font>
									</p>
								</div>
							</div>
							<!--<div class="table-box-item" v-if='$store.state.type==2'>
								<div class="left">
									<h3 v-if="item.isIncome==0">收入-{{item.payerName }}<font color="#007AFF" v-if="item.payerRealname !=''">（{{item.payerRealname }}）</font></h3>
									<h3 v-else-if="item.isIncome==1">支出-{{item.receiverName }}<font color="#007AFF" v-if="item.receiverRealname !=''">（{{item.receiverRealname }}）</font></h3>
									<p>[{{item.payType}}]</p>
									<p>{{item.payTime}}</p>
								</div>
								<div class="right">
									<h2 v-if="item.isIncome==0"><font color="#FF4949">+{{item.payAmount}}</font></h2>
									<h2 v-else-if="item.isIncome==1"><font color="#333333">-{{item.payAmount}}</font></h2>
									<p v-if="item.payStatus==0">
										<font color="#00CC66">已支付</font>
									</p>
									<p v-else-if="item.payStatus==1">
										<font color="#FF4949">未支付</font>
									</p>
								</div>
							</div>-->
							<div class="table-box-item" v-if='$store.state.type==3'>
								<div class="left">
									<h3 v-if="item.isIncome==0">收入-{{item.priseName }}<font color="#007AFF" v-if="item.priseRealname !=''">（{{item.priseRealname }}）</font></h3>
									<h3 v-else-if="item.isIncome==1">支出-{{item.receiverName }}<font color="#007AFF" v-if="item.receiverRealname !=''">（{{item.receiverRealname }}）</font></h3>
									<p>[{{item.receiveType}}]</p>
									<p>{{item.receiveTime}}</p>
								</div>
								<div class="right">
									<h2 v-if="item.isIncome==0"><font color="#FF4949">+{{item.increaseAmount}}</font></h2>
									<h2 v-else-if="item.isIncome==1"><font color="#333333">-{{item.increaseAmount}}</font></h2>
									<p v-if="item.receiveStatus==0">
										<font color="#00CC66">已支付</font>
									</p>
									<p v-else-if="item.receiveStatus==1">
										<font color="#FF4949">未支付</font>
									</p>
									<p>服务费&nbsp;<font color="#FF4949">{{item.serviceCharge}}</font></p>
								</div>
							</div>
							<div class="table-box-item" v-if='$store.state.type==4'>
								<div class="left">
									<h3 v-if="item.isIncome==0">收入-{{item.priseName }}<font color="#007AFF" v-if="item.priseRealname !=''">（{{item.priseRealname }}）</font></h3>
									<h3 v-else-if="item.isIncome==1">支出-{{item.receiverName }}<font color="#007AFF" v-if="item.receiverRealname !=''">（{{item.receiverRealname }}）</font></h3>
									<p>[{{item.receiveType}}]</p>
									<p>{{item.receiveTime}}</p>
								</div>
								<div class="right">
									<h2 v-if="item.isIncome==0"><font color="#FF4949">+{{item.priseAmount}}</font></h2>
									<h2 v-else-if="item.isIncome==1"><font color="#333333">-{{item.priseAmount}}</font></h2>
									<p v-if="item.receiveStatus==0">
										<font color="#00CC66">已支付</font>
									</p>
									<p v-else-if="item.receiveStatus==1">
										<font color="#FF4949">未支付</font>
									</p>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="divTab" v-show="nowIndex===1">
					<ul class="table-box">
						<li v-if="isShow">
							<div class="no-data">
								暂无数据！
							</div>
						</li>
						<li v-if="items!=''" v-for="item in items" v-on:click = "go('/kbc/h5/HistoryDetail',item,$store.state.type)">
							<div class="table-box-item" v-if='$store.state.type==1 || $store.state.type==2'>
								<div class="left">
									<h3 v-if="item.isIncome==0">收入-{{item.payerName }}<font color="#007AFF" v-if="item.payerRealname !=''">（{{item.payerRealname }}）</font></h3>
									<h3 v-else-if="item.isIncome==1">支出-{{item.receiverName }}<font color="#007AFF" v-if="item.receiverRealname !=''">（{{item.receiverRealname }}）</font></h3>
									<p>[{{item.payType}}]</p>
									<p>{{item.payTime}}</p>
								</div>
								<div class="right">
									<h2 v-if="item.isIncome==0"><font color="#FF4949">+{{item.payAmount}}</font></h2>
									<h2 v-else-if="item.isIncome==1"><font color="#333333">-{{item.payAmount}}</font></h2>
									<p v-if="item.payStatus==0">
										<font color="#00CC66">已支付</font>
									</p>
									<p v-else-if="item.payStatus==1">
										<font color="#FF4949">未支付</font>
									</p>
								</div>
							</div>
							<!--<div class="table-box-item" v-if='$store.state.type==2'>
								<div class="left">
									<h3 v-if="item.isIncome==0">收入-{{item.payerName }}<font color="#007AFF" v-if="item.payerRealname !=''">（{{item.payerRealname }}）</font></h3>
									<h3 v-else-if="item.isIncome==1">支出-{{item.receiverName }}<font color="#007AFF" v-if="item.receiverRealname !=''">（{{item.receiverRealname }}）</font></h3>
									<p>[{{item.payType}}]</p>
									<p>{{item.payTime}}</p>
								</div>
								<div class="right">
									<h2 v-if="item.isIncome==0"><font color="#FF4949">+{{item.payAmount}}</font></h2>
									<h2 v-else-if="item.isIncome==1"><font color="#333333">-{{item.payAmount}}</font></h2>
									<p v-if="item.payStatus==0">
										<font color="#00CC66">已支付</font>
									</p>
									<p v-else-if="item.payStatus==1">
										<font color="#FF4949">未支付</font>
									</p>
								</div>
							</div>-->
							<div class="table-box-item" v-if='$store.state.type==3'>
								<div class="left">
									<h3 v-if="item.isIncome==0">收入-{{item.priseName }}<font color="#007AFF" v-if="item.priseRealname !=''">（{{item.priseRealname }}）</font></h3>
									<h3 v-else-if="item.isIncome==1">支出-{{item.receiverName }}<font color="#007AFF" v-if="item.receiverRealname !=''">（{{item.receiverRealname }}）</font></h3>
									<p>[{{item.receiveType}}]</p>
									<p>{{item.receiveTime}}</p>
								</div>
								<div class="right">
									<h2 v-if="item.isIncome==0"><font color="#FF4949">+{{item.increaseAmount}}</font></h2>
									<h2 v-else-if="item.isIncome==1"><font color="#333333">-{{item.increaseAmount}}</font></h2>
									<p v-if="item.receiveStatus==0">
										<font color="#00CC66">已支付</font>
									</p>
									<p v-else-if="item.receiveStatus==1">
										<font color="#FF4949">未支付</font>
									</p>
									<p>服务费&nbsp;<font color="#FF4949">{{item.serviceCharge}}</font></p>
								</div>
							</div>
							<div class="table-box-item" v-if='$store.state.type==4'>
								<div class="left">
									<h3 v-if="item.isIncome==0">收入-{{item.priseName }}<font color="#007AFF" v-if="item.priseRealname !=''">（{{item.priseRealname }}）</font></h3>
									<h3 v-else-if="item.isIncome==1">支出-{{item.receiverName }}<font color="#007AFF" v-if="item.receiverRealname !=''">（{{item.receiverRealname }}）</font></h3>
									<p>[{{item.receiveType}}]</p>
									<p>{{item.receiveTime}}</p>
								</div>
								<div class="right">
									<h2 v-if="item.isIncome==0"><font color="#FF4949">+{{item.priseAmount}}</font></h2>
									<h2 v-else-if="item.isIncome==1"><font color="#333333">-{{item.priseAmount}}</font></h2>
									<p v-if="item.receiveStatus==0">
										<font color="#00CC66">已支付</font>
									</p>
									<p v-else-if="item.receiveStatus==1">
										<font color="#FF4949">未支付</font>
									</p>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="divTab" v-show="nowIndex===2">
					<ul class="table-box">
						<li v-if="isShow">
							<div class="no-data">
								暂无数据！
							</div>
						</li>
						<li v-if="items!=''" v-for="item in items" v-on:click = "go('/kbc/h5/HistoryDetail',item,$store.state.type)">
							<div class="table-box-item" v-if='$store.state.type==1 || $store.state.type==2'>
								<div class="left">
									<h3 v-if="item.isIncome==0">收入-{{item.payerName }}<font color="#007AFF" v-if="item.payerRealname !=''">（{{item.payerRealname }}）</font></h3>
									<h3 v-else-if="item.isIncome==1">支出-{{item.receiverName }}<font color="#007AFF" v-if="item.receiverRealname !=''">（{{item.receiverRealname }}）</font></h3>
									<p>[{{item.payType}}]</p>
									<p>{{item.payTime}}</p>
								</div>
								<div class="right">
									<h2 v-if="item.isIncome==0"><font color="#FF4949">+{{item.payAmount}}</font></h2>
									<h2 v-else-if="item.isIncome==1"><font color="#333333">-{{item.payAmount}}</font></h2>
									<p v-if="item.payStatus==0">
										<font color="#00CC66">已支付</font>
									</p>
									<p v-else-if="item.payStatus==1">
										<font color="#FF4949">未支付</font>
									</p>
								</div>
							</div>
							<!--<div class="table-box-item" v-if='$store.state.type==2'>
								<div class="left">
									<h3 v-if="item.isIncome==0">收入-{{item.payerName }}<font color="#007AFF" v-if="item.payerRealname !=''">（{{item.payerRealname }}）</font></h3>
									<h3 v-else-if="item.isIncome==1">支出-{{item.receiverName }}<font color="#007AFF" v-if="item.receiverRealname !=''">（{{item.receiverRealname }}）</font></h3>
									<p>[{{item.payType}}]</p>
									<p>{{item.payTime}}</p>
								</div>
								<div class="right">
									<h2 v-if="item.isIncome==0"><font color="#FF4949">+{{item.payAmount}}</font></h2>
									<h2 v-else-if="item.isIncome==1"><font color="#333333">-{{item.payAmount}}</font></h2>
									<p v-if="item.payStatus==0">
										<font color="#00CC66">已支付</font>
									</p>
									<p v-else-if="item.payStatus==1">
										<font color="#FF4949">未支付</font>
									</p>
								</div>
							</div>-->
							<div class="table-box-item" v-if='$store.state.type==3'>
								<div class="left">
									<h3 v-if="item.isIncome==0">收入-{{item.priseName }}<font color="#007AFF" v-if="item.priseRealname !=''">（{{item.priseRealname }}）</font></h3>
									<h3 v-else-if="item.isIncome==1">支出-{{item.receiverName }}<font color="#007AFF" v-if="item.receiverRealname !=''">（{{item.receiverRealname }}）</font></h3>
									<p>[{{item.receiveType}}]</p>
									<p>{{item.receiveTime}}</p>
								</div>
								<div class="right">
									<h2 v-if="item.isIncome==0"><font color="#FF4949">+{{item.increaseAmount}}</font></h2>
									<h2 v-else-if="item.isIncome==1"><font color="#333333">-{{item.increaseAmount}}</font></h2>
									<p v-if="item.receiveStatus==0">
										<font color="#00CC66">已支付</font>
									</p>
									<p v-else-if="item.receiveStatus==1">
										<font color="#FF4949">未支付</font>
									</p>
									<p>服务费&nbsp;<font color="#FF4949">{{item.serviceCharge}}</font></p>
								</div>
							</div>
							<div class="table-box-item" v-if='$store.state.type==4'>
								<div class="left">
									<h3 v-if="item.isIncome==0">收入-{{item.priseName }}<font color="#007AFF" v-if="item.priseRealname !=''">（{{item.priseRealname }}）</font></h3>
									<h3 v-else-if="item.isIncome==1">支出-{{item.receiverName }}<font color="#007AFF" v-if="item.receiverRealname !=''">（{{item.receiverRealname }}）</font></h3>
									<p>[{{item.receiveType}}]</p>
									<p>{{item.receiveTime}}</p>
								</div>
								<div class="right">
									<h2 v-if="item.isIncome==0"><font color="#FF4949">+{{item.priseAmount}}</font></h2>
									<h2 v-else-if="item.isIncome==1"><font color="#333333">-{{item.priseAmount}}</font></h2>
									<p v-if="item.receiveStatus==0">
										<font color="#00CC66">已支付</font>
									</p>
									<p v-else-if="item.receiveStatus==1">
										<font color="#FF4949">未支付</font>
									</p>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</mt-loadmore>
	</div>
</template>
<style>
	.HistoryWallet {
		margin-top: 4rem;
	}
	
	.HistoryWallet .tabs-bar {
		border-bottom: 1px solid #CECECE;
		position: fixed;
		width: 100%;
		height: 45px;
		z-index: 999;
		background: #FFFFFF;
	}
	
	.HistoryWallet .tabs-bar .tabs-bar-nav {
		display:table; 
		min-height: 45px;
		width: 100%;
		position: absolute;
		bottom: -1px;
	}
	
	.HistoryWallet .tabs-bar .tabs-bar-nav .tabs-tab {
		width: 33.33333%;
		vertical-align:middle;   
  		display:table-cell;
		font-size: 1.2rem;
		font-size: 1.2rem;
		position: relative;
		box-sizing: border-box;
		text-align: center;
		min-height: 45px;
		cursor: pointer;
		-moz-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		
	}
	
	.HistoryWallet .tabs-bar .tabs-bar-nav .tabs-active {
		font-size: 1.2rem;
		border-bottom: 1px solid #007AFF;
		color: #007AFF;
	}
	
	.HistoryWallet .tabs-content {
		width: 100%;
		padding: 5px 10px;
		box-sizing: border-box;
		background: #fff;
		margin-top: 41px;
	}
	.HistoryWallet .tabs-content .divTab .table-box li {
		border-bottom: 1px solid #eee;
		display: flex;
		padding: 1rem 0;
	}
	
	.HistoryWallet .tabs-content .divTab .table-box li h2 {
		font-size: 1.4rem;
	}
	.HistoryWallet .tabs-content .divTab .table-box li .table-box-item{
		display: flex;width: 100%;
	}
	.HistoryWallet .tabs-content .divTab .table-box li .table-box-item .left {
		-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.HistoryWallet .tabs-content .divTab .table-box li .table-box-item .right {
		-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;
		text-align: right;
	}
	
	.HistoryWallet .tabs-content .divTab .table-box li p {
		margin-top: 1.1rem;
	}
	
	.HistoryWallet .tabs-content .divTab .table-box li h3 {
		font-weight: 700;
	}
</style>
<script>
	import router from './../../router';
	import util from './../../js/util/util.js';
	import vHeader from './../common/Header.vue';
	import { Navbar, TabItem, Toast, Loadmore } from 'mint-ui';
	export default {
		data() {
			return {
				tabsParam: [{"name": "全部"},{"name": "交易买入"},{"name": "交易卖出"}],
				nowIndex: 0, //默认第一个tab为激活状态
				Page: 1,
				type: 1,
				isShow:false,//暂无数据
				allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
				items: [],
				noData: '',
				currentPage: '0',
				totalPage: '0'

			};
		},
		components: { // 声明子组件
			Navbar,
			TabItem,
			Toast,
			Loadmore,
			vHeader
		},
		methods: {
			go: function(url,data,type){
				util.pushRouter(router, url, {"item":data,"type":type});
			},
			toggleTabs: function(index) {
				this.isShow = false;
				this.nowIndex = index;
				this.items = [];
				this.Page = 1;
				this.type = index + 1; //切换交易记录 type 1：全部，2：交易买入，3：交易卖出
				this.getTeamList(this.type);
			},
			getTeamList: function(type) { //获取交易记录
				let $this = this;
				var url = "";
				if(this.$store.state.type==2){//流通钱包记录
					url = '/transcurrent/walletTransCurrent';
				}else if(this.$store.state.type==3){//生息钱包记录
					url = '/increasecurrent/walletIncreaseCurrent';
				}else if(this.$store.state.type==4){//奖励钱包记录
					url = '/prisecurrent/walletPriseCurrent';
				}else{//交易钱包记录
					url = '/walletcurrent/walletTotalCurrent';
				}
				$this.allLoaded = false;
				util.Ajax(url, "GET", {
					"type": $this.type,
					"page": $this.Page
				}, function(data) { //成功
					if(data) {
						if(data.code == "0") {
							if($this.$store.state.type==2){
								$this.totalpage = data.transCurrentMap.totalPage;
								$this.cuurPage = data.transCurrentMap.currentPage;
								if($this.totalpage < $this.cuurPage) {
									$this.allLoaded = true;
									$this.$refs.loadmore1.onBottomLoaded();
								} else {
									if($this.$store.state.type==2){//流通钱包
										for(var i in data.transCurrentMap.transCurrentEntity) {
											data.transCurrentMap.transCurrentEntity[i].payType = util.payTyeName(data.transCurrentMap.transCurrentEntity[i].payType);
											$this.items.push(data.transCurrentMap.transCurrentEntity[i]);
										}
									}
								}	
							}else{
								$this.totalpage = data.walletHistoryMap.totalPage;
								$this.cuurPage = data.walletHistoryMap.currentPage;
								
								if($this.totalpage < $this.cuurPage) {
									$this.allLoaded = true;
									$this.$refs.loadmore1.onBottomLoaded();
								} else {
									if($this.$store.state.type==1){ //交易钱包
										for(var i in data.walletHistoryMap.walletHistory) {
											data.walletHistoryMap.walletHistory[i].payType = util.payTyeName(data.walletHistoryMap.walletHistory[i].payType);
											$this.items.push(data.walletHistoryMap.walletHistory[i]);
										}
									}else if($this.$store.state.type==3){//生息钱包
										for(var i in data.walletHistoryMap.walletHistory) {
											if(util.isEmpty(data.walletHistoryMap.walletHistory[i].serviceCharge)) data.walletHistoryMap.walletHistory[i].serviceCharge = 0;
											data.walletHistoryMap.walletHistory[i].receiveType = util.payTyeName(data.walletHistoryMap.walletHistory[i].receiveType);
											$this.items.push(data.walletHistoryMap.walletHistory[i]);
										}
									}else if($this.$store.state.type==4){ //奖励钱包
										for(var i in data.walletHistoryMap.walletHistory) {
											data.walletHistoryMap.walletHistory[i].receiveType = util.payTyeName(data.walletHistoryMap.walletHistory[i].receiveType);
											$this.items.push(data.walletHistoryMap.walletHistory[i]);
										}
									}
								}
							}
							if($this.totalpage == 0){
								$this.isShow = true;
								return;
							}
							
							$this.$nextTick(function() {
								// 是否还有下一页，加个方法判断，没有下一页要禁止上拉
								$this.scrollMode = "touch";
								$this.isHaveMore();
							});
						}
					}
				});
			},
			loadTop() { //下拉刷新
				//下拉加载
				this.items = [];
				this.Page = 1;
				this.getTeamList(this.type);
				this.$refs.loadmore1.onTopLoaded(); // 固定方法，查询完要调用一次，用于重新定位
			},
			loadBottom() { //上拉加载更多数据
				this.Page += 1;
				this.getTeamList(this.type); // 加载更多数据
				this.$refs.loadmore1.onBottomLoaded();
			},
			isHaveMore: function() {
				// 是否还有下一页，如果没有就禁止上拉刷新
				//this.allLoaded = false; //true是禁止上拉加载
				if(this.cuurPage == this.totalpage) {
					Toast("没有更多数据了...");
					this.allLoaded = true;
				}
			}
		},
		created() {
			this.$store.state.type = this.$route.query.type;
			if(this.$store.state.type == 1){
				this.$store.state.headings = "交易钱包-交易记录";
				this.tabsParam = [{"name": "全部"},{"name": "交易买入"},{"name": "交易卖出"}];
			}else if(this.$store.state.type == 2){
				this.$store.state.headings = "流通钱包-交易记录";
				this.tabsParam = [{"name": "全部"},{"name": "钱包转入"},{"name": "钱包转出"}];
			}else if(this.$store.state.type == 3){
				this.$store.state.headings = "生息钱包-交易记录";
				this.tabsParam = [{"name": "全部"},{"name": "生息转出"},{"name": "钱包充值"}];
			}else if(this.$store.state.type == 4){
				this.$store.state.headings = "奖励钱包-交易记录";
				this.tabsParam = [{"name": "全部"},{"name": "积分奖励"},{"name": "积分兑换"}];
			}
//			this.$store.state.headings = this.$router.history.current.name; //修改标题
			this.$store.state.isFooterShow = false; //显示底部导航
			
		},
		mounted: function() {
			let $this = this;
			this.getTeamList($this.type);
		}
	}
</script>